import { Md5 } from 'ts-md5/dist/md5';
import React, { useReducer, useRef } from 'react';
import { Row, Col, Input, Button } from 'antd';
import './login.less';
import {
  UserOutlined,
  LockOutlined,
  PoweroffOutlined,
} from '@ant-design/icons';
import { AxiosParam, Requests, RequestsStatus } from '@/utils/requests';
import { LoginModel } from '@/models/login';
import { ApiPath } from '@/config/api_config';
import {
  LoginInitState,
  loginReducer,
} from '@/pages/admin/login/login_reducer';

export default () => {
  const initState: LoginInitState = {};
  const [loginState, dispatch] = useReducer(loginReducer, initState);
  const emailRef = useRef<Input>(null);
  const passwordRef = useRef<Input>(null);

  const login = () => {
    const param: AxiosParam = {
      email: emailRef.current?.state.value,
      password: String(Md5.hashStr(passwordRef.current?.state.value)),
    };
    Requests.defaults.http<LoginModel>('post', ApiPath.login, {
      postData: param,
      callBack: {
        init: () => {
          dispatch({ type: RequestsStatus.init, payload: {} });
        },
        finally: () => {
          dispatch({ type: RequestsStatus.finally, payload: {} });
        },
        success: (response) => {
          dispatch({
            type: RequestsStatus.success,
            payload: {
              message: '登录成功',
              data: response.data.data,
            },
          });
        },
        unSuccess: (response) => {
          dispatch({
            type: RequestsStatus.unSuccess,
            payload: {
              message: response.data.msg,
            },
          });
        },
      },
    });
  };

  return (
    <div className={'main'}>
      <div className={'main_content'}>
        <h2 style={{ textAlign: 'center' }}>博客后台</h2>
        <Input
          className="login_inputs"
          size="large"
          ref={emailRef}
          placeholder="请输入账号"
          prefix={<UserOutlined />}
        />
        <Input.Password
          ref={passwordRef}
          className="login_inputs"
          size="large"
          placeholder="请输入密码"
          prefix={<LockOutlined />}
        />
        <div className={'login_btn'}>
          <Button
            style={{ width: '100%' }}
            type="primary"
            icon={<PoweroffOutlined />}
            loading={loginState.isLoading}
            onClick={login}
          >
            登陆
          </Button>
        </div>
      </div>
    </div>
  );

  // return (
  //   <Row className="mainRow" justify="center">
  //     <Col className="mainCol" span={8}>
  //       <Row justify="center">
  //         <Input
  //           name={'userName'}
  //           className="inputs"
  //           size="large"
  //           ref={emailRef}
  //           placeholder="请输入账号"
  //           prefix={<UserOutlined />}
  //         />
  //         <Input.Password
  //           name={'password'}
  //           ref={passwordRef}
  //           className="inputs"
  //           size="large"
  //           placeholder="请输入密码"
  //           prefix={<LockOutlined />}
  //         />
  //         <Button
  //           className="loginButton"
  //           type="primary"
  //           icon={<PoweroffOutlined />}
  //           loading={loginState.isLoading}
  //           onClick={login}
  //         >
  //           登陆
  //         </Button>
  //       </Row>
  //     </Col>
  //   </Row>
  // );
};
